<html>
<head>
<meta charset="UTF-8">
<title>HTML과의 연계</title>
<script type="text/javascript">
	function createTag1() {
		// <div> 엘리먼트를 만듭니다.
		var element = document.createElement("div");
		
		// 스타일 속성을 만듭니다.
		var attribute = document.createAttribute("style");
		
		// 스타일 속성의 값을 입력합니다.
		attribute.nodeValue = "background-color: #EEE; width: 100px; height: 100px;";
		
		// 만들어둔 엘리먼트에 속성을 적용합니다.
		element.setAttributeNode(attribute);
		
		// 문서의 <body> 에 하위 노드로 엘리먼트를 붙여넣습니다.
		document.body.appendChild(element);
	}
	
	function createTag2() {
		// <div> 엘리먼트를 만듭니다.
		var element = document.createElement("div");
		
		// 엘리먼트의 속성을 설정합니다.
		element.setAttribute("style", "background-color: #AAA; width: 100px; height: 100px;");

		// 문서의 <body>에 하위 노드로 엘리먼트를 붙여넣습니다.
		document.body.appendChild(element);
	}
</script>
</head>
<body>
	<button onclick="createTag1();">객체 만들기 1</button>
	<button onclick="createTag2();">객체 만들기 2</button>
</body>
</html>
